<template>
  <div class="course-discuss-container">

    <div class="box">
      <!--      {{ this.$route.query }}-->
      <!--   头部信息   -->
      <div class="title">
        <div class="text">
          讨论区
        </div>

        <div class="total">
          {{ total }}
        </div>
        <div :class="{'hot':true,'currentTab':currentTab=='hot'}" @click="chooseTab('hot')">
          最热
        </div>
        <div class="split">
          |
        </div>
        <div :class="{'new':true,'currentTab':currentTab=='new'}" @click="chooseTab('new')">
          最新
        </div>
      </div>


      <!--   发言框   -->
      <div class="my-input">


        <div class="head-portrait">
          <Avatar icon="ios-person" :size="50" :src="userInfo.headPortraitUrl"/>
        </div>

        <div class="input">
          <Input v-model.trim="myDiscuss"
                 type="textarea"
                 :maxlength="5000"
                 show-word-limit
                 :autosize="{minRows: 2,maxRows: 5}"
                 placeholder="我的看法"
                 @on-enter="sendMyDiscuss"
                 style="width: 100%"/>
        </div>

        <div class="btn">
          <Button type="success" style="height: 100%;" @click="sendMyDiscuss">发布</Button>
        </div>
      </div>


      <!-- 评论详情 -->
      <div class="discuss">
        <div v-for="(obj,i) in commentList" :key=obj.commentId class="discuss-each">

          <CourseReply :obj="obj"></CourseReply>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import CourseReply from "@/components/course/CourseReply";

export default {
  //组件名称
  name: "CourseDiscuss",
  props: {
    courseDetailId: {
      type: String,
    }
  },
  //组件注册
  components: {IconAli, CourseReply},
  //数据驱动
  data() {
    return {
      total: 0,           //评论的总记录数
      currentTab: "hot",  //评论排序
      myDiscuss: "",           //我的评论
      commentList: [],
    }
  },
  //计算属性
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo;
    },
    isLogin() {
      return this.$store.getters.getIsLogin;
    }
  },
  //数据监听
  watch: {},
  //方法
  methods: {
    //选择评论的排序方式
    chooseTab(currentTab) {
      this.currentTab = currentTab;
    },
    //发送我的评论
    sendMyDiscuss() {
      //判断是否登录
      if (!this.isLogin) {
        alert("未登录用户不可评论")
        return;
      }
      let data = {
        content: this.myDiscuss
      }
      this.axios.post(`/comment/comment/comment/${this.courseDetailId}/${this.userInfo.userId}`, data)
          .then((data) => {
            //提交成功
            this.myDiscuss = ""
            //触发子组件调用查询自己评论

          })
    },
    //点击回复
    reply() {

    },
    //获取我的评论列表
    selectMyDiscussList() {
      //第一个我的,官方,最热|最新
      this.axios.get(`/comment/comment/comment/my/${this.courseDetailId}/${this.userInfo.userId}`)
          .then((data) => {
            this.commentList = data.data;

            this.commentList.forEach(i => {
              i.commentId = i.commentId
              i.userInfo = {
                userId: i.userInfo.userId,
                nickName: i.userInfo.nickName,
                headPortraitUrl: i.userInfo.headPortraitUrl,
              },
                  i.toUserInfo = {
                    userId: i.userInfo.userId,
                    nickName: i.userInfo.nickName,
                    headPortraitUrl: i.userInfo.headPortraitUrl,
                  },
                  i.discuss = {
                    content: i.content,
                    createdDateTime: i.createdDateTime,
                    likeNum: i.likeNum,
                    unlikeNum: i.unlikeNum,

                    like: i.like,
                    unlike: i.unlike,
                    likeHover: false,     //前端处理新增字段
                    unlikeHover: false,
                    replyFlag: false,
                  }
            })

          })
    },
    //获取评论列表
    selectDiscussList() {
      //第一个我的,官方,最热|最新
      this.axios.get(`/comment/comment/comment/${this.courseDetailId}/${this.userInfo.userId}`, {
        params: {
          page: 1,
          rows: 10,
          order: this.currentTab
        }
      })
          .then((data) => {
            this.commentList.push(data.data.list);
            this.total = data.data.total;

            this.commentList.forEach(i => {
              i.commentId = i.commentId
              i.userInfo = {
                userId: i.userInfo.userId,
                nickName: i.userInfo.nickName,
                headPortraitUrl: i.userInfo.headPortraitUrl,
              },
                  i.toUserInfo = {
                    userId: i.userInfo.userId,
                    nickName: i.userInfo.nickName,
                    headPortraitUrl: i.userInfo.headPortraitUrl,
                  },
                  i.discuss = {
                    content: i.content,
                    createdDateTime: i.createdDateTime,
                    likeNum: i.likeNum,
                    unlikeNum: i.unlikeNum,

                    like: i.like,
                    unlike: i.unlike,
                    likeHover: false,     //前端处理新增字段
                    unlikeHover: false,
                    replyFlag: false,
                  }
            })

          })
    },
  },
  created() {
  },
  //钩子函数
  mounted() {
    this.selectMyDiscussList();
    this.selectDiscussList();
  }
}
</script>

<style lang="less" scoped>
.course-discuss-container {
  .box {
    padding-bottom: 40px;
  }

  .title {
    display: flex;
    //border-top: 1px solid #000;
    padding: 10px 0px;

    div {
      height: 30px;
      line-height: 30px;
    }

    .text { //讨论区文字
      font-size: 20px;
      color: #000;
      font-weight: bold;
    }

    .total { //多少条评论
      margin-left: 15px;
      line-height: 38px;
    }

    .split {
      line-height: 36px;
    }

    .hot {
      line-height: 38px;
      margin-left: 30px;
      margin-right: 10px;
      cursor: pointer;
    }

    .hot:hover {
      color: #00AEEC;
    }

    .new {
      line-height: 38px;
      margin-left: 10px;
      cursor: pointer;
    }

    .new:hover {
      color: #00AEEC;
    }
  }

  /*发言输入框*/

  .my-input {
    display: flex;
    //border:1px solid #000000;
    margin-top: 30px;

    .head-portrait { //头像
      padding: 0px 20px 0px 10px;
      cursor: pointer;
    }

    .input {
      flex-grow: 2;
    }

    .btn {
      padding: 4px 10px 4px 20px;
    }
  }

  /*评论详情*/

  .discuss {
    margin-top: 40px;

    .discuss-each {
      //background-color: #F8F8F8;
      border-radius: 6px;
      box-shadow: 0px 0px 2px 2px #D7D7D7;
      padding: 22px 0px;
      margin-bottom: 30px;
      //border-top: 1px solid #777;
      //border-bottom: 1px solid #777;
    }
  }

  .currentTab {
    color: #000 !important;
    font-weight: bold;
  }
}
</style>